<!--货流管理-->
<template>
  <div>
    <div class="header-right">
      <el-button v-show="activeName2=='first'" class="export-btn  float-left" type="primary" round>{{lang._011}}</el-button>
      <!-- 导出按钮 -->
      <el-select v-show="activeName2=='first'" class="float-left select-input" v-model="value" :placeholder="lang._408">
      </el-select>
      <!-- 下拉选择框 -->
      <el-input v-show="activeName2=='first'" class="text-input float-left" width="131px" :placeholder="lang._407"></el-input>
      <!-- 输入框 -->
      <el-date-picker v-show="activeName2=='first'" class="dataTime float-left" v-model="dataTime" type="datetimerange" :picker-options="pickerOptions2"
        range-separator="|" start-placeholder="2018-3-13 0:00:00" end-placeholder="2018-3-13 24:00:00" align="right">
      </el-date-picker>
      <el-button v-show="activeName2=='first'" class="float-left search-btn" type="primary" round>{{lang._012}}</el-button>
      <!-- 时间选择 -->

      <!-- tab1 的显示 -->
      <el-button type="text btn" v-show="activeName2=='second'" style="line-height:30px;font-size:15px;margin-right:20px;">进货门店：Tast Of Blue</el-button>
      <!-- tab2 的显示 -->
      <p v-show="activeName2=='third'">从 <span>TAST OF BLUE </span>调货至 <span>XXX</span></p>
      <!-- tab3 的显示 -->
      <p v-show="activeName2=='four'">出库门店: <span>TAST OF BLUE </span>，出库类型： <span>XXX</span></p>
      <!-- tab4 的显示 -->
    </div>
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane :label="lang._393" name="first">
        <el-table class="text-center tables" border :data="tableData" stripe header-cell-style="color:#409eff;background-color:#ECF5FF;text-align:center;font-size:15px;padding-left:0;padding-right:0"
          style="width:calc(100% - 40px)">
          <el-table-column type="selection" width="40">
          </el-table-column>
          <el-table-column prop="uid" :label="lang._045" width="40">
          </el-table-column>
          <el-table-column prop="operate" :label="lang._028" width="40">
            <template slot-scope="scope">
              <el-button type="text">{{lang._078}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="orderTime" :label="lang._396" width="150">
          </el-table-column>
          <el-table-column prop="shippingOrder" :label="lang._409" width="120">
          </el-table-column>
          <el-table-column prop="invoiceType" :label="lang._410" width="80">
          </el-table-column>
          <el-table-column prop="shipStores" :label="lang._411" width="290">
          </el-table-column>
          <el-table-column prop="purchaseStores" :label="lang._412" width="290">
          </el-table-column>
          <el-table-column prop="status" :label="lang._413" width="260">
          </el-table-column>
          <el-table-column prop="freightTrafficVolume" :label="lang._414" width="80">
          </el-table-column>
          <el-table-column prop="totalPrices" :label="lang._415" width="80">
          </el-table-column>
          <el-table-column prop="advance" :label="lang._402" width="80">
          </el-table-column>
          <el-table-column prop="remark" :label="lang._027">
          </el-table-column>
        </el-table>
        <el-footer>
          <el-checkbox class="float-left check-all-btn" v-model="checked">全选</el-checkbox>
          <el-button class="float-left btn" type="primary" round>汇总导出</el-button>
        </el-footer>
      </el-tab-pane>
      <!-- 货流管理 -->
      <el-tab-pane :label="lang._404" name="second">
        <el-table class="text-center tables" border :data="tableData2" stripe header-cell-style="color:#409eff" style="width:calc(100% - 40px)">
          <el-table-column prop="uid" :label="lang._045" width="60">
          </el-table-column>
          <el-table-column prop="operate" :label="lang._028" width="60">
            <template slot-scope="scope">
              <el-button type="text">{{lang._078}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" :label="lang._416" width="410">
          </el-table-column>
          <el-table-column prop="barCode" :label="lang._417" width="110">
          </el-table-column>
          <el-table-column prop="supplier" :label="lang._418" width="240">
          </el-table-column>
          <el-table-column prop="batchNumber" :label="lang._419" width="117">
          </el-table-column>
          <el-table-column prop="manufactureDate" :label="lang._420" width="117">
          </el-table-column>
          <el-table-column prop="stock" :label="lang._421" width="117">
          </el-table-column>
          <el-table-column prop="retailPurchases" :label="lang._422" width="117">
              <template slot-scope="scope">
              <el-input style="width:97px;display:block;margin:0 auto;"></el-input>
                </template>
          </el-table-column>
          <el-table-column prop="unit" :label="lang._423" width="87">
              <template slot-scope="scope">
              <el-select style="width:97px;display:block;margin:0 auto;border:none"></el-select>
                </template>
          </el-table-column>
          <el-table-column prop="purchasingCost" :label="lang._424" width="117">
              <template slot-scope="scope">
              <el-input style="width:97px;display:block;margin:0 auto;"></el-input>
                </template>
          </el-table-column>
          <el-table-column prop="subtotal" :label="lang._425">
          </el-table-column>
        </el-table>

        <el-footer>
          <el-button class="float-left btn" type="primary" round>{{lang._426}}</el-button>
          <el-input class="float-left text-input" style="width:340px" :placeholder="lang._427" type="text"></el-input>
          <el-button type="primary" class="float-left btn" round style="border-radius:0 50px 50px 0;margin-left:0">{{lang._428}}</el-button>
          <!-- 左边 -->
          <el-button class="float-right btn" type="primary" round>{{lang._429}}</el-button>
          <el-button class="float-right btn" type="text" style="color:#000;">商品种类：1，数量：1，总金额：0.10</el-button>                 
          <!-- 右边 -->
        </el-footer>
      </el-tab-pane>
      <!-- 进货 -->
      <el-tab-pane :label="lang._405" name="third">
        <el-table class="text-center tables" border :data="tableData3" stripe header-cell-style="color:#409eff" style="width:calc(100% - 40px)">
          <el-table-column prop="uid" :label="lang._045" width="60">
          </el-table-column>
          <el-table-column prop="operate" :label="lang._028" width="60">
            <template slot-scope="scope">
              <el-button type="text">{{lang._078}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" :label="lang._416" width="468">
          </el-table-column>
          <el-table-column prop="barCode" :label="lang._417" width="110">
          </el-table-column>
          <el-table-column prop="supplier" :label="lang._418" width="388">
          </el-table-column>
          <el-table-column prop="stock" :label="lang._421" width="117">
          </el-table-column>
          <el-table-column prop="cargo" :label="lang._430" width="117">
              <template slot-scope="scope">
              <el-input style="width:97px;display:block;margin:0 auto;"></el-input>
                </template>
          </el-table-column>
          <el-table-column prop="unit" :label="lang._423" width="87">
              <template slot-scope="scope">
              <el-select style="width:97px;display:block;margin:0 auto;border:none"></el-select>
                </template>
          </el-table-column>
          <el-table-column prop="purchasingCost" :label="lang._432" width="117">
              <template slot-scope="scope">
              <el-input style="width:97px;display:block;margin:0 auto;"></el-input>
                </template>
          </el-table-column>
          <el-table-column prop="subtotal" :label="lang._425">
          </el-table-column>
        </el-table>

        <el-footer>
          <el-button class="float-left btn" type="primary" round>{{lang._426}}</el-button>
          <el-input class="float-left text-input" style="width:340px" :placeholder="lang._427" type="text"></el-input>
          <el-button type="primary" class="float-left btn" round style="border-radius:0 50px 50px 0;margin-left:0">{{lang._428}}</el-button>
          <!-- 左边 -->
          <el-button class="float-right btn" type="primary" round>{{lang._432}}</el-button>
          <el-button class="float-right btn" type="text" style="color:#000;">商品种类：1，数量：1，总金额：0.10</el-button>                 
          <!-- 右边 -->
        </el-footer>
      </el-tab-pane>
      <!-- 调货 -->
      <el-tab-pane :label="lang._406" name="four">
        <el-table class="text-center tables" border :data="tableData3" stripe header-cell-style="color:#409eff" style="width:calc(100% - 40px)">
          <el-table-column prop="uid" :label="lang._045" width="60">
          </el-table-column>
          <el-table-column prop="operate" :label="lang._028" width="60">
            <template slot-scope="scope">
              <el-button type="text">{{lang._078}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" :label="lang._416" width="468">
          </el-table-column>
          <el-table-column prop="barCode" :label="lang._417" width="110">
          </el-table-column>
          <el-table-column prop="supplier" :label="lang._418" width="388">
          </el-table-column>
          <el-table-column prop="stock" :label="lang._421" width="117">
          </el-table-column>
          <el-table-column prop="cargo" :label="lang._433" width="117">
              <template slot-scope="scope">
              <el-input style="width:97px;display:block;margin:0 auto;"></el-input>
                </template>
          </el-table-column>
          <el-table-column prop="unit" :label="lang._423" width="87">
              <template slot-scope="scope">
              <el-select style="width:97px;display:block;margin:0 auto;border:none"></el-select>
                </template>
          </el-table-column>
          <el-table-column prop="purchasingCost" :label="lang._434" width="117">
              <template slot-scope="scope">
              <el-input style="width:97px;display:block;margin:0 auto;"></el-input>
                </template>
          </el-table-column>
          <el-table-column prop="subtotal" :label="lang._425">
          </el-table-column>
        </el-table>

        <el-footer>
          <el-button class="float-left btn" type="primary" round>{{lang._426}}</el-button>
          <el-input class="float-left text-input" style="width:340px" :placeholder="lang._427" type="text"></el-input>
          <el-button type="primary" class="float-left btn" round style="border-radius:0 50px 50px 0;margin-left:0">{{lang._428}}</el-button>
          <!-- 左边 -->
          <el-button class="float-right btn" type="primary" round>{{lang._432}}</el-button>
          <el-button class="float-right btn" type="text" style="color:#000;">商品种类：1，数量：1，总金额：0.10</el-button>                 
          <!-- 右边 -->
        </el-footer>
      </el-tab-pane>
      <!-- 出货 -->
    </el-tabs>
  </div>
</template>
<style lang="less" scoped>
  .header-right {
    position: absolute;
    z-index: 2;
    right: 0;
    height: 60px;
    p{
      font-size: 15px;
      line-height: 60px;
      color: #1b1b1b;
      margin: 0;
      padding: 0;
      margin-right: 20px;
      span{
        color: #409EFF;
      }
    }
    .export-btn {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .search-btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      border-radius: 0 14px 14px 0;
      margin-right: 20px;
    }
    .dataTime {
      border: 1px solid #409eff;
      color: #409eff;
      height: 30px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
      border-radius: 0;
    }
    .text-input {
      border: 1px solid #409eff;
      color: #409eff;
      height: 28px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
      width: 131px;
      border-radius: 0;
      border-right: 0;
    }
    .select-input {
      border: 1px solid #409eff;
      color: #409eff;
      height: 28px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
      width: 131px;
      border-radius: 14px 0 0 14px;
      border-right: 0;
    }
  }

  .el-footer {
    position: fixed;
    bottom: 0;
    width: calc(100% - 200px);
    line-height: 60px;
    background: #FFF;
    .check-all-btn {
      color: #409EFF;
    }
    .btn {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .text-input {
      border: 1px solid #409eff;
      color: #409eff;
      height: 28px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
      width: 131px;
      border-radius: 0;
      border-right: 0;
    }
  }

</style>
<style>
  .tabpanel {
    width: 100%;
  }
.el-input__inner{
    border:none;
    background: none;
}
  .el-table .cell,
  .el-table th div {
    padding-left: 0;
    padding-right: 0;
  }

  .text-input .el-input__inner,
  .select-input .el-input__inner {
    height: 28px;
    line-height: 28px;
    border: none;
    float: left;
  }

  .el-table {
    margin: 20px;
  }

  .el-tabs__header {
    height: 60px;
    margin: 0;
    background: #FFF;
  }

  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    margin-top: 15px;
    border: none;
    color: #409eff;
    font-size: 15px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-bottom: none;
    border-left: none;
    margin-left: 20px;
    margin-right: 20px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    color: #FFF;
    background: #409eff;
    border-radius: 14px;
  }

  .el-tabs__content {
    height: calc(100vh - 61px - 80px);
    background: unset;
  }

  .el-date-editor .el-range-input {
    float: left;
    color: #409eff;
    width: calc(50% - 15px);
  }

  .el-date-editor .el-range-separator {
    float: left;
    color: #409eff;
  }

  .el-date-editor .el-range__icon {
    display: none;
  }

  .el-table th {
    text-align: center !important;
  }

  .el-table th,
  .el-table tr {
    background-color: unset;
  }

  .el-table tr {
    background: #edf5ff;
  }

  .el-table__row {
    background: unset !important;
  }

</style>


<script>
  export default {
    props: ['lang'],
    data() {
      return {
        activeName2: 'first',
        //初始的选择标签页
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataTime: '',
        //时间选择器
        tableData: [{
          uid: '1',
          orderTime: '2017-8-12 02:25:53',
          shippingOrder: '12333',
          invoiceType: '进货单',
          shipStores: 'Tast Of Blue',
          purchaseStores: '',
          status: '待确认进货',
          freightTrafficVolume: '1',
          totalPrices: '123.00',
          advance: '50.00',
          remark: '加急'
        }, {
          uid: '1',
          orderTime: '2017-8-12 02:25:53',
          shippingOrder: '12333',
          invoiceType: '进货单',
          shipStores: 'Tast Of Blue',
          purchaseStores: '',
          status: '待确认进货',
          freightTrafficVolume: '1',
          totalPrices: '123.00',
          advance: '50.00',
          remark: '加急'
        }, {
          uid: '1',
          orderTime: '2017-8-12 02:25:53',
          shippingOrder: '12333',
          invoiceType: '进货单',
          shipStores: 'Tast Of Blue',
          purchaseStores: '',
          status: '待确认进货',
          freightTrafficVolume: '1',
          totalPrices: '123.00',
          advance: '50.00',
          remark: '加急'
        }, {
          uid: '1',
          orderTime: '2017-8-12 02:25:53',
          shippingOrder: '12333',
          invoiceType: '进货单',
          shipStores: 'Tast Of Blue',
          purchaseStores: '',
          status: '待确认进货',
          freightTrafficVolume: '1',
          totalPrices: '123.00',
          advance: '50.00',
          remark: '加急'
        }, ],
        //营业概况的表格数据
        tableData2: [{
            uid: '1',
            goodsName: '假装有东西的名字',
            barCode: '102420483072',
            supplier: '供应商A',
            batchNumber: '1',
            manufactureDate: '2017-12-31',
            stock: '5',
            subtotal: '4563.00'
        },{
            uid: '1',
            goodsName: '假装有东西的名字',
            barCode: '102420483072',
            supplier: '供应商A',
            batchNumber: '1',
            manufactureDate: '2017-12-31',
            stock: '5',
            subtotal: '4563.00'
        },{
            uid: '1',
            goodsName: '假装有东西的名字',
            barCode: '102420483072',
            supplier: '供应商A',
            batchNumber: '1',
            manufactureDate: '2017-12-31',
            stock: '5',
            subtotal: '4563.00'
        },{
            uid: '1',
            goodsName: '假装有东西的名字',
            barCode: '102420483072',
            supplier: '供应商A',
            batchNumber: '1',
            manufactureDate: '2017-12-31',
            stock: '5',
            subtotal: '4563.00'
        },],
        //交接班的表格数据
        tableData3:[{
            uid: '1',
            goodsName: '假装有东西的名字',
            barCode: '102420483072',
            supplier: '供应商A',
            batchNumber: '1',
            manufactureDate: '2017-12-31',
            stock: '5',
            subtotal: '4563.00'
        },{
            uid: '1',
            goodsName: '假装有东西的名字',
            barCode: '102420483072',
            supplier: '供应商A',
            batchNumber: '1',
            manufactureDate: '2017-12-31',
            stock: '5',
            subtotal: '4563.00'
        },{
            uid: '1',
            goodsName: '假装有东西的名字',
            barCode: '102420483072',
            supplier: '供应商A',
            batchNumber: '1',
            manufactureDate: '2017-12-31',
            stock: '5',
            subtotal: '4563.00'
        },{
            uid: '1',
            goodsName: '假装有东西的名字',
            barCode: '102420483072',
            supplier: '供应商A',
            batchNumber: '1',
            manufactureDate: '2017-12-31',
            stock: '5',
            subtotal: '4563.00'
        },],
        //现金收支明细的表格数据
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }

</script>
